<template>

    <div class="mb-3">

        <NForm :model="formValue" ref="formRef" inline>
            <div class="flex flex-row"></div>
            <NFormItem label="开始日期">
                <NDatePicker v-model:formatted-value="formValue.fromDate"   value-format="yyyy-MM-dd" />
            </NFormItem>
            <NFormItem label="结束日期">
                <NDatePicker v-model:formatted-value="formValue.toDate"  value-format="yyyy-MM-dd" />
            </NFormItem>
        </NForm>
        <div class="flex justify-end gap-2">
            <n-button @click="query">
                查询
            </n-button>
            <n-pagination v-model:page="nowPage" :page-count="100" simple :on-update:page="onPageChange" />
            <n-button @click="downloadCsv">
                导出
            </n-button>
        </div>

    </div>
    <n-data-table ref="tableRef" :columns="columns" :data="list" :max-height="400" :loading="loading" />

</template>

<script lang="ts" setup>
import { NDatePicker, NForm, NFormItem, type DataTableColumns, type DataTableInst } from 'naive-ui'
import { onMounted, ref } from 'vue'
import type { WordRecord } from '../types/WordResponse';
import { WordDaoFactory } from '../services/dao/WordDaoFactory';
import dayjs from 'dayjs';
const dateFormat = 'YYYY-MM-DD'
let wordDao = WordDaoFactory.getWordDao()
const list = ref<WordRecord[]>([])
const columns: DataTableColumns<WordRecord> = [
    {
        title: '单词',
        key: 'word'
    },
    // {
    //     title: '来源',
    //     key: 'from'
    // }, 
    {
        title: '翻译',
        key: 'translation'
    },
    {
        title: '星级',
        key: 'star',
        filterOptions: [
            {
                label: '1',
                value: '1'
            },
            {
                label: '2',
                value: '2'
            },
            {
                label: '3',
                value: '3'
            },
        ],
        filter(value, row) {
            console.log("filter:", value, row)
            return (row.star != null && row.star) == value
        }
    },
    {
        title: '添加时间',
        key: 'createTime',
        render(rowData) {
            const time = dayjs(rowData.createTime)
            return time.format('YYYY-MM-DD HH:mm:ss')
        },
    },
]

const formValue = ref({
    fromDate: dayjs().format(dateFormat),
    toDate: dayjs().add(1,'day').format(dateFormat),
})
const nowPage = ref(1)
const pageSize = ref(100)
const loading = ref(false)
async function loadWords() {

    loading.value = true
    const wordList = await wordDao.getAllWords({
        page:nowPage.value,
        limit:pageSize.value,
        fromDate:formValue.value.fromDate,
        toDate:formValue.value.toDate,
    });
    // 渲染单词列表
    list.value = wordList
    loading.value = false
}


const tableRef = ref<DataTableInst>()

function query() {
    loadWords()
}

function onPageChange(pageNum: number) {
    console.log("on page change:", pageNum);

    nowPage.value = pageNum
    loadWords()
}
function downloadCsv() {
    tableRef.value?.downloadCsv({
        fileName: 'words.csv',
        keepOriginalData: false
    })
}
onMounted(async () => {
    // 获取单词列表
    loadWords()

})

</script>